{% extends 'base.html' %}
{% block content %}

<style>
    table {
        counter-reset: rowNumber;
        }
    table tr {
        counter-increment: rowNumber;
        }
    table tr td:first-child::before {
        content: counter(rowNumber);
        margin-right: 0.5em;
        }

</style>

<div class="container">
    <div style="margin-bottom: 10px" class="clearfix">
        <a class="btn btn-success" href="/devices/add">
            <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
            添加设备
        </a>
        <a class="btn btn-success" href="/devices/all">
            <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
            批量导入
        </a>
        <div style="float: right;width: 500px">
            <form method="get">
                <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" name="q" class="form-control" placeholder="请输入IP或地区..." value={{ search_data }}>
                        <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </button>
                      </span>
                    </div><!-- /input-group -->
                  </div><!-- /.col-lg-6 -->
            </form>
        </div>

    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
            设备列表
        </div>

        <table class="table table-bordered">
            <tr>
                <th>序号</th>
                <th>管理IP</th>
                <th>设备名称</th>
                <th>型号</th>
                <th>地区</th>
                <th>位置</th>
                <th>设备操作</th>
            </tr>
            {% for device in queryset %}
            <tr>
                <td></td>
                <td>{{ device.ip_address}}</td>
                <td>{{ device.dev_name }}</td>
                <td>{{ device.xinghao }}</td>
                <td>{{ device.diqu }}</td>
                <td>{{ device.weizhi }}</td>
                <td>
                    <a class="btn btn-primary btn-xs" href="/devices/?nid={{ device.id }}">删除</a>
                    <a class="btn btn-primary btn-xs" href="/devices/{{ device.id }}/edit/">编辑</a>
                    <a class="btn btn-primary btn-xs" target="_blank" href="/devices/{{ device.id }}/ssh/">登录</a>
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>
    <ul class="pagination">
        {{ page_string }}
    </ul>
</div>
{% endblock%}